<template>
  <div class="title-component border-bottom-1px">
    <div class="back" @click="$router.back()">
      <i class="cubeic-back"></i>
    </div>
    <div class="title" :class="{'center': isCenter}">{{ title }}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    isCenter: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="stylus">
.title-component
  height 45px
  line-height 45px
  position fixed
  width 100%
  top 0
  left 0
  background white
  display flex
  z-index 10
  .back
    width 45px
    color #999
    //font-weight 700
    font-size 20px
  .title
    flex 1
    text-align left
    color $main_text_color
    font-weight 700
    overflow hidden
    letter-spacing 1px
    padding-right 15px
    &.center
      text-align center
      text-indent -45px
</style>
